<template>
	<view>
		<header-common title="帖子详情"></header-common>
		
		<!-- 帖子详情 -->
		<!-- 轮播 -->
		<div>
		<uv-swiper :list="list" indicator indicatorMode="line" circular :border="false" height="240"></uv-swiper>
		</div>
		<!-- 用户 -->
		<view class="user">
			<image :src="data.userImg" mode="aspectFill"></image>
			<view class="user-name">
				{{data.userName}}
			</view>
			<view class="attention">
				<uv-icon color="#fff" name="plus"></uv-icon>
				&nbsp;
				关注
			</view>
		</view>
		<!-- <uni-icons type="contact" size="30"></uni-icons> -->
		<!-- 标题 -->
		<view class="title">
			{{data.title}}
		</view>
		<!-- tag标签 -->
		<!-- <view v-if="data.tabs.length>0" class="tabs">
			<view v-for="(item,index) in data.tabs" :key="index">
				{{item.title}}
			</view>
		</view> -->
		<!-- 内容 -->
		<view class="content">
			{{data.msg}}
		</view>
		<!-- 评论 -->
<CComment
    ref="ccRef"
    v-model:myInfo="myInfo"
    v-model:userInfo="userInfo"
    v-model:tableData="tableData"
    v-model:tableTotal="tableTotal"
    :deleteMode="deleteMode"
    @likeFun="likeFun"
    @replyFun="replyFun"
    @deleteFun="deleteFun"
  ></CComment>
  <view class="btn" @tap="openComment">发表新评论</view>
		<!-- 发送评论框悬浮在底部,  -->
	</view>
</template>

<script> 
	export default {
		data() {
			return {
				list: [
					'https://image.szcits.cn/Public/Uploads/Travel/ctrip/line/22978692/100w12000000s8uklB76D_D_520_350_Q100.jpg',
					'https://image.szcits.cn/Public/Uploads/Travel/ctrip/line/22978692/10050x000000liagq68BF_D_520_350_Q100.jpg',
				],
				data:{
					userName:"中国式相亲官方",
					userImg:"https://image.szcits.cn/Public/Uploads/Travel/ctrip/line/24954197/300614000000x4n4f7255_D_520_350_Q100.jpg",
					title: "《中国式相亲》2025年更新计划&当前进度",
					msg:"大家好!我们是《中国式相亲》制作组波浪游戏以及发行商LightningGames，感谢每一位玩家在游戏上线以来给予我们的支持、反馈和热情关注。无论是Steam评论区的犀利评论，B站的精彩解说，还是玩家群里热烈的讨论，都让我们深刻体会到这款游戏能被大家玩到并讨论，是多么难得和幸运的一件事。同时我们也深知，游戏随着体验的深入，暴露出了一些问题。对此，我们将始终坚持积极响应，及时行动，争取在游戏进入稳定前做到日更修复，确保大家的游玩体验不受影响，包括使用修改器导致游戏卡死的问题，我们均已完成修复，并通过更新发布。",
					tabs:[{id:1,title:"游戏",id:2,title:"公告"}]
				},
				// 评论
				// ccRef:null,
				deleteMode :"all", 
				
				// ----模拟数据------模拟数据------模拟数据----
				// 当前登录用户信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
				myInfo:{
			  user_id: 1, // 用户id
			  user_name: "cc", // 用户名
			  user_avatar: "https://img0.baidu.com/it/u=2836960144,3650263035&fm=253&fmt=auto&app=138&f=JPEG?w=474&h=474", // 用户头像地址
			},
			userInfo:{
			  user_id: 2, // 用户id
			  user_name: "ikun", // 用户名
			  user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
			},
			tableTotal: 4, // 评论总数
			tableData: [ // 评论表
			  {
			    id: 120, // 评论id
			    parent_id: null, // 评论父级的id
			    reply_id: null, // 被回复评论的id
			    reply_name: null, // 被回复人名称
			    user_id: 2, // 用户id
			    user_name: "ikun", // 用户名
			    user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
			    user_content: "唱,跳,rap,篮球", // 用户评论内容
			    is_like: false, // 用户是否点赞
			    like_count: 120, // 点赞数统计
			    create_time: "2025-02-19 09:16", // 创建时间
			  },
			  {
			    id: 130,
			    parent_id: 120, // 评论父级的id
			    reply_id: 120, // 被回复评论的id
			    reply_name: "ikun", // 被回复人名称
			    user_id: 3, // 用户id
			    user_name: "小黑子", // 用户名
			    user_avatar: "https://pic2.zhimg.com/80/v2-06eade66ec837713d765b1557bf20b25_720w.webp", // 用户头像地址
			    user_content: "姬霓太美~祝自己生日快乐~~", // 用户评论内容
			    is_like: false, // 用户是否点赞
			    like_count: 67, // 点赞数统计
			    create_time: "2025-03-07 00:06", // 创建时间
			  },
			  {
			    id: 140,
			    parent_id: 120, // 评论父级的id
			    reply_id: 130, // 被回复评论的id
			    reply_name: "小黑子", // 被回复人名称
			    user_id: 4, // 用户id
			    user_name: "守护宗主维护宗门", // 用户名
			    user_avatar: "https://pic3.zhimg.com/80/v2-244696a62fa750b8570cf56bfaa5b26a_720w.webp", // 用户头像地址
			    user_content: "你露出鸡脚了", // 用户评论内容
			    is_like: false, // 用户是否点赞
			    like_count: 16, // 点赞数统计
			    create_time: "2025-05-10 17:08", // 创建时间
			  },
			  {
			    id: 150,
			    parent_id: null, // 评论父级的id
			    reply_id: null, // 被回复评论的id
			    reply_name: null, // 被回复人名称
			    user_id: 5, // 用户id
			    user_name: "音乐制作人", // 用户名
			    user_avatar: "https://pic2.zhimg.com/80/v2-88ec6f8c6d3305122664dd18a28730e5_720w.webp", // 用户头像地址
			    user_content:
			      "只因你太美baby 只因你太美baby 只因你实在是太美baby 只因你太美baby 迎面走来的你让我如此蠢蠢欲动 这种感觉我从未有 Cause I got a crush on you who you 你是我的 我是你的 谁 再多一眼看一眼就会爆炸 再近一点靠近点快被融化", // 用户评论内容
			    is_like: true, // 用户是否点赞
			    like_count: 8, // 点赞数统计
			    create_time: "2025-12-21 00:45", // 创建时间
			  },
			],
			}
		},
		methods: {
			// 唤起新评论弹框
			openComment(){
				console.log(this.$refs.ccRef);
				// this.ccRef.newCommentFun();
			},
			// 点赞回调事件
			 likeFun({ params }, callback) {
			  console.log("likeFun", params);
			  // 当请求失败, 调用callback重置点赞效果;
			  // Demo如下:
			  // axios.post("http://xxx/like", { id: params }).then((res) => {
			  //   if (res.code !== 0) {
			  //     callback(res);
			  //   }
			  // });
			},
			
			// 评论回调事件
			replyFun({ params }, callback) {
			  console.log("replyFun", params);
			  // 当请求成功, 调用callback执行评论插入;
			  // Demo如下:
			  // axios.post("http://xxx/reply", { ...params }).then((res) => {
			  //   if (res.code === 0) {
			  //     callback(res);
			  //   }
			  // });
			  const res = { id: Math.random() }; // 很重要的回参! 必须拿到后端返回评论id! 删除需要!
			  setTimeout(() => callback(res), 500); // 目前为了展示效果, 直接执行callback
			},
			
			/** 删除回调事件
			 * mode 删除模式
			 * -- bind: 当被删除的一级评论存在回复评论, 那么该用户评论内容变更显示为[当前用户评论内容已被移除]
			 * -- only: 仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对)
			 * -- all : 删除所有评论包括回复评论
			 */
			deleteFun({ params, mode }, callback) {
			  console.log("deleteFun", { params, mode });
			  // 当请求成功, 调用callback执行评论删除;
			  // Demo如下:
			  // axios.post("http://xxx/delete", { ids: params, mode }).then((res) => {
			  //   if (res.code === 0) {
			  //     callback(res);
			  //   }
			  // });
			  switch (mode) {
			    case "bind":
			      // 逻辑: 调用接口进行用户评论内容修改 update
			      setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
			      break;
			    case "only":
			      // 逻辑: 调用接口删除一个评论 delete
			      setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
			      break;
			    default:
			      // all
			      // 逻辑: 调用接口删除多个评论 [delete]
			      setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
			      break;
			  }
			},
			
			
			
		}
	}
</script>

<style lang="scss" scoped>

.user{
	display: flex;
	padding: 12rpx 24rpx;
	height: 60rpx;
	align-items: center;
	margin-bottom: 12rpx;
	&>image{
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
	}
	.user-name{  
		font-size: 14px;
		padding-left: 16rpx;
	}
	.attention{
		display: flex;
		font-size: 14px;
		color:#fff;
		background-color: #000;
		border-radius: 12rpx;
		padding: 6rpx 16rpx;
		margin-left: auto;
	}
}

.title{
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 12rpx;
}

.content{
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 12rpx;
}

 
</style>